<!--
 * @Author: Wangtao
 * @Date: 2020-11-16 17:38:44
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-10-12 19:06:25
-->
<template>
    <el-form class="m7-form" :inline="true" label-position="top" size="mini" :model="formStacked.form" @submit.native.prevent>
        <el-form-item v-for="(item, index) in formStacked.advSearchOptions" :key="index" label-position="top" :prop="item.name" :label="item.label" @submit.native.prevent>
            <el-input size="mini"
              v-if="item.inputType === 'input'"
              v-model="formStacked.form[item.name]"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              @clear="searchFun"
              @blur='searchFun'
              @keyup.enter.native="searchFun">
              <i slot="prefix" class="el-input__icon el-icon-search" @click="searchFun"></i>
            </el-input>
            <div v-if="item.inputType === 'select'">
              <m7Select size="mini"
                v-model="formStacked.form[item.name]"
                @input="searchFun"
                placeholder="请选择" filterable
                :multiple="item.multiple || false"
                :collapse-tags="item.multiple || false"
                :options="item.selectData"
                :defaultProps="item.defaultProp || {label: 'name', value: '_id'}"
                :clearable="item.clearable">
              </m7Select>
            </div>
            <div v-if="item.inputType === 'ele-select'">
                <el-select v-model="formStacked.form[item.name]"
                           @change="searchFun"
                           filterable
                           :clearable="item.clearable"
                           :multiple="item.multiple || false"
                           :collapse-tags="item.multiple || false"
                           :placeholder="item.placeholder ? item.placeholder : '请选择'">
                    <el-option
                            v-for="(item2,index) in item.selectData"
                            :key="index"
                            :label="item2[item.defaultProp.label]"
                            :value="item2[item.defaultProp.value]">
                    </el-option>
                </el-select>
            </div>
            <div v-if="item.inputType === 'selectAndIpt'">
              <m7Select size="mini"
                class="scopeSelect"
                v-model="formStacked.form[item.name]"
                @input="searchFun"
                placeholder="请选择" filterable
                :multiple="item.multiple || false"
                :collapse-tags="item.multiple || false"
                :options="item.selectData"
                :defaultProps="item.defaultProp || {label: 'name', value: '_id'}"
                :clearable="item.clearable">
              </m7Select>
              <el-input size="mini"
                class="scopeIpt"
                v-model="formStacked.form[item.searchName]"
                :placeholder="item.placeholder"
                :clearable="true"
                @clear="searchFun"
                @blur='searchFun'
                @keyup.enter.native="searchFun">
                <i slot="prefix" class="el-input__icon el-icon-search" @click="searchFun"></i>
              </el-input>
            </div>
            <el-date-picker
              v-if="item.inputType === 'dateTimeRange'"
              style="width: 320px;"
              v-model="formStacked.form[item.name]"
              type="datetimerange"
              :clearable="item.clearable"
              value-format='yyyy-MM-dd HH:mm:ss'
              @change="searchFun"
              :picker-options="formStacked.selfPickerOptions ? formStacked.selfPickerOptions : pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
            <el-date-picker
              v-if="item.inputType === 'date'"
              style="width: 160px;"
              v-model="formStacked.form[item.name]"
              value-format="yyyy-MM-dd"
              clearable
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="formStacked.selfPickerOptions ? formStacked.selfPickerOptions : pickerOptions">
            </el-date-picker>
            <el-time-select
              style="width: 160px;"
              v-if="item.inputType === 'timeselect'"
              v-model="formStacked.form[item.name]"
              :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00'
              }"
              clearable
              placeholder="选择时间">
            </el-time-select>
            <el-checkbox v-if="item.inputType === 'checkbox'" v-model="formStacked.form[item.name]" @change="searchFun">{{item.checkboxName}}</el-checkbox>
            <div v-if="item.inputType === 'numberRange'">
              <el-input-number
                v-model="formStacked.form[item.preName]"
                :controls="false"
                :placeholder="item.placeholder"
                :min="0"
                :max="formStacked.form[item.afterName] ? formStacked.form[item.afterName] : Infinity"
                @blur="searchFun"
                @keyup.enter.native="searchFun"
              />
              <span> - </span>
              <el-input-number
                v-model="formStacked.form[item.afterName]"
                :controls="false"
                :placeholder="item.placeholder"
                :min="formStacked.form[item.preName]"
                @blur="searchFun"
                @keyup.enter.native="searchFun"
              />
            </div>
            <div v-if="item.inputType === 'cascader'">
                <el-cascader
                  v-model="formStacked.form[item.name]"
                  :options="item.options"
                  :props="{
                    checkStrictly: item.props.checkStrictly ? item.props.checkStrictly : true,
                    multiple: item.props.multiple ? item.props.multiple : false,
                    children: item.props.children ? item.props.children : 'options',
                    emitPath: item.props.emitPath ? item.props.emitPath : true,
                    label: item.props.label ? item.props.label : 'name',
                    value: item.props.value ? item.props.value : 'name',
                    expandTrigger: item.props.expandTrigger ? item.props.expandTrigger : ''
                  }"
                  :clearable="item.clearable"
                  :filterable="item.filterable"
                  @change="searchFun"
                >
                </el-cascader>
            </div>
            <div v-if="item.inputType === 'slotCom'">
              <slot name="slotCom"></slot>
            </div>
            <div v-if="item.inputType === 'slotCom1'">
              <slot name="slotCom1"></slot>
            </div>
        </el-form-item>
        <slot name="concent"></slot>
    </el-form>
</template>

<script lang="ts">
// 父级传值实例：  private quickSearchForm = {
//     form: { // 子组件修改之后，emit到父级的form表单
//         name: '',
//         status: [],
//         time: ''
//     },
//     advSearchOptions: [ // 快捷检索的数据(语音文件名称)
//         { label: '状态名称', inputType: 'input', placeholder: '请输入状态名称', name: 'name', clearable: true }, // 表单input
//         { label: '状态', inputType: 'select', clearable: true, multiple: true, selectData: this.typeArr, name: 'status' }, // 多选下拉
//         { label: '时间', inputType: 'dateTimeRange', name: 'time' } // 日期时间类型
//     ]
// }
import { Component, Vue, Prop } from 'vue-property-decorator'
interface ArrayObj {
  props: string
}
@Component({ name: 'QuickSearch' })
export default class AdvancedSearch extends Vue {
  @Prop(Object) public advForm!: {} // 父级往下传的form表单，具体事例如上所示🔼
  get formStacked () { // 获取form
    return this.advForm
  }

  private pickerOptions: any = { // 日期时间的快捷搜索项（最近一周，最近一个月，最近三个月）
    shortcuts: [{
      text: '最近一周',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }, {
      text: '最近一个月',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }, {
      text: '最近三个月',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 89)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }]
  }

  private searchFun () { // 把修改过后的值外抛给父组件
    this.$emit('QuickSearch', this.formStacked)
  }
}
</script>
<style lang="stylus" scoped>
  .scopeSelect
    width 80px
    .el-select
    >>>.el-input__inner
      border-right none
      border-radius 4px 0px 0px 4px
  .scopeIpt
    width calc(100% - 80px)
    >>>.el-input__inner
      order-left none
      border-radius 0 4px 4px 0
</style>
